<template>
    <div class="system" ref="system">
        <top-bar styleSize="small" :bgImgUrl="bgImgUrl">
            <div class="header">
                <span class="subject">成人教育</span>
                <div class="little"></div>
                <span class="desc">第一学期</span>
            </div>
        </top-bar>
        <div class="container">
            <div class="index-bg">
                <!--课程学习-->
                <div class="work-item">
                    <div class="work-item-title">
                        <span class="desc">课程学习</span>
                    </div>
                    <div class="work-item-box">
                        <div class="select-item" @click="courseList">
                            <div class="icon-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-kechengchakan"></use>
                                </svg>
                            </div>
                            <p class="text">课程学习</p>
                        </div>
                    </div>
                </div>
                <!--教务信息-->
                <div class="work-item">
                    <div class="work-item-title">
                        <span class="desc">教务信息</span>
                    </div>
                    <div class="work-item-box">
                        <div class="select-item">
                            <div class="icon-item" style="background-color: #ff9129">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuexi"></use>
                                </svg>
                            </div>
                            <p class="text">教学计划</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: darkgreen">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chengjiguanli"></use>
                                </svg>
                            </div>
                            <p class="text">成绩查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: #df5000">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuesheng"></use>
                                </svg>
                            </div>
                            <p class="text">考试查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chaxun"></use>
                                </svg>
                            </div>
                            <p class="text">补考查询</p>
                        </div>


                        <div class="select-item">
                            <div class="icon-item" style="background-color: #ff9129">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuexi"></use>
                                </svg>
                            </div>
                            <p class="text">教学计划</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: #df5000">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuesheng"></use>
                                </svg>
                            </div>
                            <p class="text">考试查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: darkgreen">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chengjiguanli"></use>
                                </svg>
                            </div>
                            <p class="text">成绩查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chaxun"></use>
                                </svg>
                            </div>
                            <p class="text">补考查询</p>
                        </div>

                        <div class="select-item">
                            <div class="icon-item" style="background-color: darkgreen">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chengjiguanli"></use>
                                </svg>
                            </div>
                            <p class="text">成绩查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: #df5000">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuesheng"></use>
                                </svg>
                            </div>
                            <p class="text">考试查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chaxun"></use>
                                </svg>
                            </div>
                            <p class="text">补考查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: #ff9129">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuexi"></use>
                                </svg>
                            </div>
                            <p class="text">教学计划</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chaxun"></use>
                                </svg>
                            </div>
                            <p class="text">补考查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: darkgreen">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chengjiguanli"></use>
                                </svg>
                            </div>
                            <p class="text">成绩查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: #df5000">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuesheng"></use>
                                </svg>
                            </div>
                            <p class="text">考试查询</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: #ff9129">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuexi"></use>
                                </svg>
                            </div>
                            <p class="text">教学计划</p>
                        </div>
                        <div class="select-item">
                            <div class="icon-item" style="background-color: darkgreen">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chengjiguanli"></use>
                                </svg>
                            </div>
                            <p class="text">成绩查询</p>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <tips :show="tipShow"></tips>
    </div>
</template>

<script>
    /*
    * 学习体系
    * */
    import topBar from "@/components/topBar/topBar";
    import tips from "@/components/tips/tips"; // 退出系统提示
    export default {
        name: "system",
        data() {
            return {
                bgImgUrl: require('../../../assets/images/xnjd-bg2.jpg'),
                tipShow: false, // 是否显示退出页面提示
                firstTime: undefined,
            }
        },
        methods: {
            /*
            * 课程列表
            * */
            courseList() {
                this.$router.push({
                    path: '/courselist',
                    name: 'courseList'
                })
            },
            justifyPos() {
                // 节流；
                if (this.timerId) clearTimeout(this.timerId)
                this.timerId = setTimeout(() => {
                    // 获取页面滚动距离之后设置给当前路由的 元信息
                    this.$route.meta.y = window.pageYOffset
                }, 300)
            },
            /*
            * 连续按下两次返回键则就退出系统
            * */
            popstate() {
                // 第一次按下返回键做处理（只有进入组件的第一次按下才会进入这里，后面无论多少次都不进入）
                if (this.firstTime === undefined) {
                    this.firstTime = new Date().getTime();
                    this.tipShow = true
                    history.pushState(null, null, document.URL)
                    if(this.timeout) clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        this.tipShow = false
                    }, 1000)
                    return;
                }
                // 如果不是第一次按下返回键，判断是否在第一次按下返回键的 1 秒之内再次按下返回键，如果是就退出系统
                const status = new Date().getTime() - this.firstTime > 1000
                if (status) {
                    this.firstTime = new Date().getTime()
                    this.tipShow = true
                    history.pushState(null, null, document.URL)
                    if(this.timeout) clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        this.tipShow = false
                    }, 1000)
                    return;
                }
                // 退出系统
                this.$router.go(-(history.length - 3))
            }
        },
        mounted() {
            // 通过 addEventListener 方法注册事件的时候需要格外小心
            // 如果在 destroyed 钩子函数中没有销毁 scroll 事件
            // 在激活 home 组件的时候会再次绑定 scroll 事件
            // window.addEventListener('scroll', this.justifyPos)
            // 通过 on 方式绑定事件能够有效避免上述情况
            window.onscroll = this.justifyPos


           // this.$refs.system.parentNode.scrollTop = this.$route.meta.y
           //  document.body.childNodes[4].scrollTop = this.$route.meta.y


            // 对 history 做一些处理
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL)
                window.addEventListener('popstate', this.popstate, false)
            }
        },
        /*
        * 页面离开时销毁 popstate 事件
        * */
        beforeDestroy() {
            window.removeEventListener('popstate', this.popstate)
        },
        components: {
            topBar,
            tips
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/styles/icon_small.scss";

    .system {
        padding-bottom: 66px;
        .header {
            text-align: left;
            color: white;
            line-height: 40px;
            height: 40px;
            padding: 34px 20px;

            .subject {
                font-size: 20px;
                vertical-align: middle;
            }

            .little {
                height: 16px;
                width: 1px;
                background-image: linear-gradient(to bottom, #0066FF, white, #0066FF);
                display: inline-block;
                margin: 0 10px;
                margin-bottom: -3px;
            }

            .desc {
                font-size: 14px;
                /*vertical-align: middle;*/
            }
        }

        .container {
            margin-top: -40px;
            /*padding: 0 10px;*/
            .index-bg {
                background-color: white;
                border-radius: 12px 12px 0 0;

                .work-item {
                    .work-item-title {
                        padding-left: 20px;
                        text-align: left;
                        height: 40px;
                        padding-bottom: 10px;
                        padding-top: 10px;

                        .desc {
                            line-height: 40px;
                            font-size: 16px;
                            font-weight: 700;
                        }
                    }

                    .work-item-box {
                        text-align: left;

                        .select-item {
                            box-sizing: border-box;
                            display: inline-block;
                            padding-bottom: 20px;
                            width: 25%;

                            .icon-item {
                                margin: 0 auto;
                                text-align: center;
                                border-radius: 12px;
                                background-color: #27aaf6;
                                width: 44px;
                                height: 44px;
                            }

                            .text {
                                font-size: 12px;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>